<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <title>菜单管理</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <link media="all" rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}">
        <link media="all" rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}">
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <input type="text" id="menuName" placeholder="菜单名称"
                                                   autocomplete="off" class="layui-input">
                                        </div>
                                        <div class="layui-inline">
                                            <button class="layui-btn" lay-submit lay-filter="search">搜索</button>
                                            <button class="layui-btn" lay-submit lay-filter="add">新增</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-card-body">
                                    <div id="item-list" lay-filter="item-list"></div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header" id="menu_operator">新增菜单</div>
                        <div class="layui-card-body layui-form">
                            <div class="layui-form-item">
                                <label class="layui-form-label">上级菜单</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="parentMenuTree" lay-filter="parentMenuTree"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="menuName" placeholder="请输入" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">类型</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="type" value="0" title="菜单" checked="checked">
                                    <input type="radio" name="type" value="1" title="按钮">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">图标</label>
                                <div class="layui-input-block">
                                    <input type="text" name="icon" placeholder="请输入" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">URL</label>
                                <div class="layui-input-block">
                                    <input type="text" name="url" placeholder="请输入" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">权限</label>
                                <div class="layui-input-block">
                                    <input type="text" name="perms" placeholder="请输入" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">排序</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="orderNum" autocomplete="off" class="layui-input"
                                           lay-verify="number">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="submit-btn">立即提交</button>
                                </div>
                            </div>
                            <div class="layui-hide">
                                <input type="text" name="parentId" id="parentId" class="layui-input">
                                <input type="text" name="id" id="id" class="layui-input">
                                <input type="text" name="saveOrUpdate" class="layui-input" value="save">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script th:src="@{/static/layuiadmin/layui/layui.js}"></script>
        <script th:src="@{/static/bm/js/common.js}"></script>
        <script>
            layui.config({
                base: contextPath + '/layuiadmin/' //静态资源所在路径
            }).extend({
                index: 'lib/index' //主入口模块
            }).use(['index', 'form', 'tree', 'treeSelect'], function () {
                var $ = layui.$
                    , form = layui.form
                    , tree = layui.tree
                    , treeSelect = layui.treeSelect;

                //监听搜索
                form.on('submit(search)', function (data) {
                    reloadMenu({
                        "menuName": $('#menuName').val()
                    });
                });

                form.on('submit(add)', function (data) {
                    //销毁节点
                    treeSelect.revokeNode('parentMenuTree');
                    $(":input").val("");
                    $("input[name=type][value='0']").prop("checked", true);//菜单
                    $("input[name=type][value='1']").prop("checked", false);//按钮
                    $("input[name=saveOrUpdate]").val("save");
                    $('#menu_operator').text("新增菜单");
                    form.render();
                });

                //初始化 tree
                tree.render({
                    elem: '#item-list'  //绑定元素
                    , id: 'menuTreeList'  //绑定元素
                    , showCheckbox: false
                    , onlyIconControl: tree
                    , accordion: true
                    , data: []
                    , edit: ['del']
                    , operate: function (obj) {
                        var type = obj.type; //得到操作类型：add、edit、del
                        var data = obj.data; //得到当前节点的数据
                        if (type === 'del') { //删除节点
                            delMenu(data);
                        }
                    }
                    , click: function (obj) {
                        var data = obj.data;//得到当前点击的节点数据
                        console.log(obj.data);
                        clickForUpdate(data);
                    }
                });

                //重载
                window.reloadMenu = function (obj) {
                    $.post(contextPath + '/sys/menu/list', obj, function (ev) {
                        console.log(ev.data);
                        if (ev.code === '0000') {
                            tree.reload('menuTreeList', {
                                data: ev.data
                            });
                        } else {
                            layer.msg(ev.msg);
                        }
                    });
                };

                reloadMenu();


                //删除菜单
                window.delMenu = function (obj) {
                    var loading = layer.load();
                    $.post(contextPath + '/sys/menu/del', obj, function (ev) {
                        layer.close(loading);
                        if (ev.code === '0000') {
                            layer.msg(ev.msg, {
                                icon: 6, shade: 0.3, time: 1000,
                                end: function () {
                                    //重载
                                    //freshTree();
                                    treeSelect.refresh('parentMenuTree');
                                }
                            });
                        } else {
                            layer.msg(ev.msg);
                        }
                    });
                };


                //---------------------------right area-----------------------//
                //菜单下拉
                treeSelect.render({
                    elem: '#parentMenuTree'
                    , data: contextPath + '/sys/menu/listSelect'
                    , placeholder: ''
                    , click: function (d) {
                        console.log(d.data[0]); // 得到组成树的数据
                        console.log(d.data[0].id); // 得到组成树的数据
                        $('#parentId').val(d.data[0].id)
                    }
                });

                //编辑
                window.clickForUpdate = function (obj) {
                    //一级菜单无父级
                    if (obj.parentId !== '0') {
                        treeSelect.checkNode('parentMenuTree', obj.parentId);
                    } else {
                        treeSelect.revokeNode('parentMenuTree');
                    }
                    var item = obj.data;
                    Object.keys(item).forEach(function (key) {
                        if (key === "type") {
                            $("input[name=type][value='0']").prop("checked", item[key] === '0');//菜单
                            $("input[name=type][value='1']").prop("checked", item[key] === '1');//按钮
                        } else {
                            $("input[name=" + key + "]").val(item[key] || "");
                        }
                    });
                    $("input[name=saveOrUpdate]").val("update");
                    $('#menu_operator').text("修改菜单");
                    form.render();
                };

                //新增或修改menu
                form.on('submit(submit-btn)', function (data) {
                    var index = parent.layer.getFrameIndex(window.name);
                    layer.confirm('确认提交吗？', function () {
                        var loading = layer.load();
                        $.post(contextPath + '/sys/menu/saveOrUpdate', data.field, function (ev) {
                            layer.close(loading);
                            if (ev.code === '0000') {
                                layer.msg(ev.msg, {
                                    icon: 6, shade: 0.3, time: 1000,
                                    end: function () {
                                        //重载
                                        reloadMenu();
                                        treeSelect.refresh('parentMenuTree');
                                    }
                                });
                            } else {
                                layer.msg(ev.msg);
                            }
                        }, 'json');

                    });
                });
            })
            ;
        </script>
    </body>
</html>
